<template>
	<view class="content" >
		<!-- <video src="../../../static/vid.mp4" controls="false" autoplay="true"></video> -->
		<!-- <video src="../../../static/vid.mp4" controls autoplay="true" object-fit="cover"></video> -->
		<video :src="shuju.image" :controls="bo" autoplay="true" loop="true" ></video>
		<view class="live_top">
			<view class="live_user">
				<view class="live_img">
					<!-- <image src="../../../static/homebg.png" mode=""></image> -->
					<image :src="ajax + shuju.avatar" mode=""></image>
				</view>
				<view class="live_wx">
					<view class="">{{shuju.nickname}}</view>
					<view class="live_wxitem" v-if="info.user_level == 4">wx：{{shuju.wx}}</view>
				</view>
				<view class="live_copy" @click="copy(shuju.wx)" v-if="info.user_level == 4">复制</view>
			</view>
			<view class="live_people">
				<view class="live_pic">
					
					<image v-for="(item,index) in userimg" :key="index"  :src="ajax + item" mode=""></image>
					<!-- <image src="../../../static/homebg.png" mode=""></image> -->
				</view>
				<view class="live_num">{{shuju.num}}</view>
				<image class="live_head" src="../../../static/live.png" mode=""></image>
				<image class="live_close" src="../../../static/close.png" mode="" @click="back()"></image>
			</view>
		</view>
		<view class="live_info">
			<scroll-view scroll-y="true" class="live_scr" scroll-with-animation="true" :scroll-into-view="toBottom">
					<view class="info_item">
						<view class="user_title">系统公告：本直播平台禁止未成年人进行直播或打赏，请大家遵守监督....</view>
					</view>
					<view class="info_item" v-for="(item,index) in infolist" :key="index">
						<view class="user_name">{{shuju.username}}：</view>
						<view class="user_title">{{item}}</view>
					</view>
					<view :id="toBottom"></view>
			</scroll-view>
		</view>
		<view class="live_btm">
			<input type="text" value="" placeholder="说点什么..." v-model="talk" @confirm="doSearch"/>
			<view class="live_liwu" @click="liwushow()">
				<image src="../../../static/liwu.png" mode=""></image>
			</view>
			<view class="live_pay" @click="pay()">去充值</view>
		</view>
		
		<view class="liwu_bg" v-if="liwu">
			<view class="liwu_top">挑选礼物</view>
			<view class="liwu_liwu">
				<view :class="item.id == active ?'dianji':'liwu_item'" v-for="(item,index) in lwlist" :key="index" @click="xuan(item.id)">
					<!-- <image src="../../../static/hua.jpg" mode=""></image> -->
					<image :src="ajax + item.image" mode=""></image>
					<view class="liwu_name" v-if="item.id == active">{{item.price}}钻石</view>
					<view class="liwu_name" v-else>{{item.name}}</view>
					<view class="liwu_song" @click="song(item.id)" v-if="item.id == active">赠送</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';		
	export default {
		data() {
			return { 
				toBottom: 'toBottom',
				talk:'',
				active:1,
				liwu:false,
				lwlist:[],//礼物列表
				infolist:[],
				shuju:'',
				userimg:[],
				bo:false,
				ajax:'',
				info:''
			}
		},
		onLoad(option){
			var _this = this
			this.shuju = option
			console.log(this.shuju,'this.shuju')
			if(_this.shuju.user_images != ''){
				 _this.userimg = _this.shuju.user_images.split(",");
			}
			this.userinfo()
			this.slw()//礼物列表
			this.ajax = getdata.imgUrl
		},
		methods: {
			doSearch(){
				//监听input框
				if( this.talk != ''){
					this.infolist.push(this.talk)
					console.log(this.talk)
					this.talk = ''
				}
			},
			pay(){
				uni.navigateTo({
				    url: '../../mine/money/money'
				});
			},
			liwushow(){
				this.liwu = !this.liwu
			},
			xuan(id){
				// console.log(id)
				this.active = id
			},
			userinfo(){
				//用户信息
				var _this = this
				var token = uni.getStorageSync('token')
				console.log(token)
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						console.log(res)
						if(res.data.code == 1){
							_this.info = res.data.data
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
			},
			song(id){
				// console.log(id)
				var _this = this
				var token = uni.getStorageSync('token')
				var data = {
					actor:_this.shuju.nickname,
					gift_id:id,
					}
				uni.request({
					url: getdata.websiteUrl + '/movie/send_gift',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					data:data,
					success: res => {
						console.log(res)
						if(res.data.code == 1){
							// uni.setStorageSync('userinfo', res.data.data);
							getdata.shou('送出礼物！')
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
			},
			back(){
				uni.navigateBack();
			},
			slw(){
				//礼物列表
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/movie/gift_list',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						console.log(res)
						if(res.data.code == 1){
							_this.lwlist = res.data.data
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
			},
			copy(wx){
				//复制微信
			  uni.setClipboardData({
			   data: wx,
			   success: function () {
				   console.log('success');
			   }
			  });
			},
		}
	}
</script>

<style lang="scss">
.content{
	width: 100vw;
	height: 100vh;
	// background: rgba(0, 0, 0, 1);
	background: #000000;
	video{
		// width: 100vw;
		// height: 50vh;
		width: 100%;
		height: 50%;
		position: absolute;
		left:0;
		top:calc(var(--status-bar-height) + 95rpx);
	}
	
	.live_top{
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		// align-items: center;
		padding-top: calc(var(--status-bar-height) + 10rpx);
		// padding-top: var(--status-bar-height);
		// position: fixed;
		// left:0;
		// top: 0;
		z-index: 10000;
		.live_user{
			width: 350rpx;
			height: 75rpx;
			background: #333333;
			border-radius: 38rpx;
			box-sizing: border-box;
			padding-left: 4rpx;
			padding-right: 11rpx;
			display: flex;
			align-items: center;
			.live_img{
				width: 67rpx;
				height: 67rpx;
				border-radius: 50%;
				image{
					width: 67rpx;
					height: 67rpx;
					border-radius: 50%;
				}
			}
			
			.live_wx{
				margin-left: 24rpx;
				font-size: 20rpx;
				line-height: 20rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				.live_wxitem{
					margin-top: 16rpx;
				}
			}
			.live_copy{
				margin-left: auto;
				width: 92rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				font-size: 18rpx;
				font-family: PingFang SC;
				color: #0C0905;
				text-align: center;
			}
			
		}
		.live_people{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex: 1;
			.live_pic{
				display: flex;
				image{
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-left: -26rpx;
				}
				// image:first-child{
				// 	z-index: 10;
				// }
			}
			.live_num{
				font-size: 20rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 20rpx;
				margin:0 10rpx;
			}
			.live_head{
				width: 48rpx;
				height: 48rpx;
			}
			.live_close{
				width: 35rpx;
				height: 35rpx;
				margin-left: 15rpx;
			}
		}
	}
	.live_info{
		width: 100%;
		height: 360rpx;
		position: fixed;
		left: 0rpx;
		bottom:270rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		.live_scr{
			width: 100%;
			height: 360rpx;
			.info_item{
				width: 500rpx;
				background: rgba(51, 51, 51, 0.3);
				border-radius: 30rpx;
				box-sizing: border-box;
				padding: 15rpx 23rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 1.5;
				display: flex;
				margin-bottom: 20rpx;
				.user_name{
					color:#7BBFEF;
				}
				.user_title{
					
				}
			}
		}
	}
	.live_btm{
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		position: fixed;
		left:0;
		bottom: 65rpx;
		z-index: 999;
		input{
			width: 370rpx;
			height: 80rpx;
			background: rgba(0, 0, 0, 0.2);
			border: 1rpx solid #FFFFFF;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			font-size: 22rpx;
			line-height: 1.5;
			font-family: PingFang SC;
			color: #999999;

		}
		.live_liwu{
			width: 76rpx;
			height: 76rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 50%;
			margin-left: 102rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 34rpx;
				height: 34rpx;
			}
		}
		.live_pay{
			margin-left: auto;
			width: 120rpx;
			height: 52rpx;
			line-height: 52rpx;
			background: #1578F2;
			border-radius: 26rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			text-align: center;
		}
	}
	
	.liwu_bg{
		width: 100%;
		height: 700rpx;
		background: #12161E;
		border-radius: 20rpx 20rpx 0px 0px;
		position: fixed;
		left:0;
		bottom: 0;
		box-sizing: border-box;
		padding:0 10rpx;
		.liwu_top{
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #46494F;
			line-height: 1;
			border-bottom: 2rpx solid #35383F;
			padding: 42rpx 0 21rpx 24rpx;
		}
		.liwu_liwu{
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			height: 400rpx;
			box-sizing: border-box;
			padding:35rpx 20rpx 25rpx;
			.liwu_item{
				width: 138rpx; 
				height: 200rpx;
				border-radius: 10rpx;
				text-align: center;
				image{
					width: 72rpx;
					height: 89rpx;
					margin: 23rpx auto 10rpx;
				}
				.liwu_name{
					font-size: 20rpx;
					line-height: 1;
					font-family: PingFang SC;
					color: #A8ABB0;
					text-align: center;
				}
			}
			.dianji{
				width: 138rpx;
				height: 200rpx;
				border-radius: 10rpx;
				background: #1D2330 !important;
				text-align: center;
				position: relative;
				image{
					width: 72rpx;
					height: 89rpx;
					margin: 23rpx auto 10rpx;
				}
				.liwu_name{
					font-size: 20rpx;
					line-height: 1;
					font-family: PingFang SC;
					color: #A8ABB0;
					text-align: center;
				}
				.liwu_song{
					width: 140rpx;
					height: 43rpx;
					line-height: 43rpx;
					background: #F2154E;
					border-radius: 0px 0px 10rpx 10rpx;
					position: absolute;
					left:0;
					bottom: 0;
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
}
</style>
